<template>
  <div class="product">
    <div class="productDiv">
      <ul
        v-infinite-scroll="loadMore"
        infinite-scroll-disabled="moreLoading"
        infinite-scroll-distance="0"
        infinite-scroll-immediate-check="false"
      >
        <li class="pinterestLi" v-for="item of list" :key="item.id">
          <router-link :to="'/detail/' + item.id">
            <div class="pinterest_img">
              <img class="pinterest_img_sty" :src="item.imgUrl" alt="item.title">
              <div class="comments-link">
                <div class="listTitle">
                  <div class="pinterest_title" style="text-indent:0px!important;">{{item.title}}</div>
                </div>
                <div class="middleinDivTop">
                  <div class="productMoney">
                    ￥{{item.newsMoney}}
                    <span class="g_price">￥{{item.oldMoney}}</span>
                  </div>
                </div>
                <div class="tag-div">
                  <span type="text" class="am-btn am-btn-danger am-radius">6.3折</span>
                </div>
                <div class="BottominDiv">
                  <span class="s_rightstr">已售{{item.saleNum}}</span>
                </div>
                <div style="clear:both"></div>
              </div>
            </div>
          </router-link>
        </li>
      </ul>
      <div style="height: 1.3rem;clear: both;"></div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ListProduct',
  props: {
    list: Array
  },
  data () {
    return {
      queryLoading: false,
      moreLoading: false,
      allLoaded: false,
      totalNum: 0,
      pageSize: 20,
      pageNum: 1
    }
  },
  methods: {
    loadMore () {
      if (this.allLoaded) {
        this.moreLoading = true
        return
      }
      if (this.queryLoading) {
        return
      }
      this.moreLoading = !this.queryLoading
      this.pageNum++
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '~styles/mixins.styl'
.product
  background-color: #f8f8f8
  position: absolute
  left: 0
  right: 0
  top: 1.3rem
  bottom: 0.98rem
  .productDiv
    width: 100%
    .pinterestLi
      position: relative
      display: block
      left: 1px
      top: 10px
      width: calc(50% - 0.3rem)
      margin: 0.14rem
      padding: 0
      box-shadow: 0 0.04rem 0.12rem rgba(105, 105, 105, 0.5)
      list-style: none
      float: left
      overflow: hidden
      background-color: #fff
      z-index: 1
      box-sizing: border-box
      .pinterest_img
        display: inline-block
        width: 100%
        font-size: 0
        min-height: 40px
        .pinterest_img_sty
          height: 175px
          width: 100%
          display: inline-block
      .comments-link
        padding: 0px 6px
        font-size: 12px
        font-size: 0.26rem
        .listTitle
          float: left
          width: 100%
          position: relative
          .pinterest_title
            text-decoration: none
            font-size: 14px
            color: #1c1f20
            display: inline-block
            width: 100%
            height: auto
            line-height: 22px
            vertical-align: middle
            ellipsis()
        .middleinDivTop
          float: left
          width: 100%
          margin-top: -5px
          .productMoney
            line-height: 25px
            color: #ed2935
            float: left
            margin-left: 0px
            margin-right: 5px
            vertical-align: middle
            height: 25px
            font-size: 16px
            overflow: hidden
            text-overflow: ellipsis
            .g_price
              text-decoration: line-through
              color: #a1a1a1
              font-size: 13px
              padding-left: 2px
              font-weight: 100
        .tag-div
          position: absolute
          line-height: 14px
          top: 0.01rem
          left: 0.01rem
          .am-btn-danger
            color: #fff
            background-color: #f93c42 !important
            border-color: #f93c42 !important
            padding: 1px 4px
            text-align: center
            display: inline-block
            line-height: 1.2
        .BottominDiv
          height: 16px
          line-height: 15px
          padding: 0
          margin: 0
          .s_rightstr
            float: right
            margin-right: 0px
            vertical-align: middle
            color: #676869
            text-align: right
            width: 58%
            font-size: 11px
            line-height: 17px
</style>
